import React  from 'react';
import { Icon } from 'antd';
import './NewsCategory.less'

const EnglishCategory = (props) => (
  <div className="filter-bar-category">
    <label className="category-name">Category:</label>
    <ul className="category-list">
      <span className="category-list-span">
        {
          props.categoryListFifty ?
          props.categoryListFifty.map((item, index) => {
            return (
              <li
                className={`category-item ${props.activeItem === item.name ? 'active': ''}`}
                key={index}
                onClick={() => props.toChooseCategory(item.name, item.id)}>
                {item.name}
              </li>
            )
          })
          :
          null
        }
        {
          props.categoryListFifty && props.categoryListFifty.length >= 14 ?
          <span>
            {
              props.categoryStatus ?
              <li className="close-category" onClick={props.toChangeCategoryStatus}>Close<Icon className="category-icon" type="up" /></li>
              :
              <li className="close-category" onClick={props.toChangeCategoryStatus}>Open<Icon className="category-icon" type="down" /></li>
            }
          </span>
          :
          null
        }

      </span>
    </ul>
  </div>
)

export default EnglishCategory;
